[Day 16] 阿嬤都看得懂的通用 .html 檔案結構

13th鐵人賽

Logos50607

團隊Web 實驗室

2021-10-01 10:22:29

1040 瀏覽

分享至

阿嬤都看得懂的通用 .html 檔案結構

不知道各位聰明的阿嬤是否注意到，在前幾天的討論中，我們其實也隱隱區分了 2 種不同功能的 HTML 標籤，其中一種的功能，是告訴瀏覽器要渲染出那些元件，例如 div 標籤；另一種的功能，則是告訴瀏覽器應該怎麼渲染這些元件，而本身不渲染出來。那麼，我們是否應該也將這 2 種 HTML 標籤分開管理呢？

沒錯！因此，我們會有 2 個特殊的標籤，分別是

head，用來包含不需要渲染出來、只是要告訴瀏覽器的資訊的標籤；以及
body，用來包含需要瀏覽渲染出來的正文標籤。

除了 link 標籤和 style 標籤之外，還有哪些放在 head 標籤中的標籤呢？我們還必須告訴瀏覽器那些不需要渲染出來的資訊呢？我們還需要

title，也就是這個網頁的標題。被這個標籤包含的文字，就會出現在瀏覽器的分頁標籤上喔！
meta，超級多資訊都可以被包含在這邊，也正因為這樣，我們的資訊必須使用 name 字樣來告訴瀏覽器，這個資訊屬於哪個分類，再用 content 字樣，來告訴瀏覽器這些資訊的細節。例如 name 為描述 (description) 的時候，content 的內容就會出現在搜尋引擎的搜尋結果中；另個值得注意的是， name 為可視區域 (viewport; 或譯「視圖」)，這會告訴瀏覽器螢幕或手機的寬高，允許我們的網頁在不同的裝置上，可以使用不同的渲染方式－－畢竟，電腦螢幕的寬比高長，而手機螢幕的寬比高短，也就會需要不同的渲染方式囉！這部分我們會在後面介紹響應式網頁設計 (RWD) 的章節提到。
script，有沒有覺得這個單字很熟悉呢？沒錯，長得和 "JavaScript" 這個語言的名字很像對吧？它就是我們引入 JavaScript 腳本的標籤沒錯！值得注意的是，script 的引入未必都放在 head 當中，也有可能放在 body 標籤中的最後。至於為什麼，就讓我們提到 JavaScript 的時候再介紹囉！
額外提一下，在 link 標籤中，我們還可以引入網頁圖示，也就是在網頁分頁上面的小圖示。只要把用 href 引入的檔案，rel 設為 "icon" 就可以囉！

最後，讓我們想一想，瀏覽器怎麼會知道整個網頁，是使用什麼國家或地區的文字，進行編寫呢？這會影響著瀏覽器的語音功能與翻譯功能，更會影響到搜尋引擎的區域設定，所以相當重要。

不過，我們並不只在 body 標籤中，才會使用文字對嗎？在 head 的 title 標籤，以及 meta 中 name 為 description 的 content 中，我們都用到自己國家或地區的文字。因此，我們會用一個大的標籤，把 head 標籤和 body 標籤包裹起來。這個標籤就叫做

html，當中我們會使用 lang 字樣，來告訴我們這個網頁所使用的文字，屬於哪個國家或地區。格式會是以語言-文字-地區的方式來表達；以台灣為例，使用的是中文 zh，文字則是傳統漢字 HANT，而地區則是台灣 TW，因此寫起來就會是：

<html lang="zh-Hans-TW">

另外，儘管現在大多的瀏覽器都很聰明，會在讀取網頁檔案的時候，自動辨別 .html 這個附檔名，而知道這個檔案需要用 HTML 的方式去渲染；不過，在比較老舊的 HTML 版本中，必須指定 HTML 的渲染模式，也因此必須在整個檔案的最前面，告訴瀏覽器這個 HTML 文件 (document) 的類型 (type)，寫起來長得像這樣：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">>

是不是看起來超長超嚇人的？時至今日，我們已經可以只寫

<!DOCTYPE html>

就好，甚至可以完全不寫這段文字，瀏覽器也可以正常渲染喔～

咦，那幹嘛還介紹這段文字呢？讓我先賣個關子，其實重點在於那個開頭的驚嘆號......至於為什麼，我們未來再揭露這個祕密吧！

因此，我們的 .html 檔案大概會是長這樣：

<!DOCTYPE html>
<html lang="...">
	<head>
		<title> ... </title>
		<meta name="..." content="...">
		<meta name="..." content="...">
		<link href="..." rel="...">
		<link href="..." rel="...">
		<script> ... </script>
	</head>
	<body>
		.
		.
		.
		<script> ... </script>
	</body>
</html>

是不是又臭又長呢？沒關係，工程師當然也有一套偷懶高效率寫出這個結構的工具囉！

這幾天介紹了怎麼把樣式從元件中獨立收整出來的方法，也介紹了把提供網頁資訊的標籤與渲染元件的標籤分離開來的方法，所以我們已經知道怎麼把 .css 檔案和 .html 檔案拆分開來，也知道 .html 的通用檔案結構。那麼，明天我們會介紹些什麼呢？

阿嬤們在使用記事本寫這些程式碼的時候，會不會經常拼錯字，覺得超級煩的呢？我會！所以，既然到現在我們已經介紹了許多標籤與樣式，明天讓我們介紹一些好用的寫程式工具，讓大家寫起程式更加懶惰有效率吧！